<template>
  <component :is="isElIcon" v-if="isElIcon"></component>
  <svg aria-hidden="true" class="dbant-icon" v-else>
    <use :xlink:href="symbolId" :class="className" />
  </svg>
</template>
<script >
import {  defineComponent } from "vue";
export default defineComponent({
  name: 'dbant-icon',
  props: {
    prefix: {
      type: String,
      default: "dbant-icon",
    },
    icon: { type: String, default: "" },
    size: { type: String, default: "" },
    color: {
      type: String,
      default: "",
    }
  },
  computed: {
    symbolId() {
      return this.icon && this.icon.startsWith("#")
        ? this.icon
        : `#${this.prefix}-${this.icon}`
    },
    className() {
      return this.icon && this.icon.startsWith("#")
        ? this.icon.substring(1)
        : `${this.prefix}-${this.icon}`
    },
    isElIcon() {
      return this.icon && this.icon.startsWith("#") && this.icon.startsWith("#el-icon-")
        ? this.icon.substring(1)
        : null
    }
  }

}
);
</script>
<style scoped>
svg {
  width: 1.3em;
  height: 1.3em;
  vertical-align: -0.25em;
  overflow: hidden;
}
</style>